<template>
  <div class="scrollBox">
    <div class="select-file">
      <input id="input" type="file" />
    </div>
    <VueOfficePdf v-if="pdfData" :src="pdfData"></VueOfficePdf>
    <VueOfficeExcel v-if="excleData" :src="excleData"></VueOfficeExcel>
    <VueOfficeDocx v-if="docxData" :src="docxData"></VueOfficeDocx>
  </div>
</template>

<script>
/* eslint-disable */
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
  components: { VueOfficePdf, VueOfficeExcel, VueOfficeDocx },
  data() {
    return {
      pdfData: '',
      excleData: '',
      docxData: '',
    }
  },
  mounted() {
    this.addInputEventListener()
  },
  methods: {
    // 获取文件上传类型
    getValueAfterDot(str) {
      if (!str) return;
      const parts = str.split('.').slice(-1)[0];
      return parts.length > 1 ? parts : undefined;
    },
    // 监听input事件，展示是文件内容
    addInputEventListener() {
      const input = document.querySelector('#input')
      input.addEventListener('input', (e) => {
        const fileBlob = e.target.files[0]
        const fileType = this.getValueAfterDot(fileBlob.name)

        // 第一种方式（通过window.URL.createObjectURL将Blob文件流转为一个路径）
        // this.pdfData = window.URL.createObjectURL(new Blob([fileBlob]))

        // 第二种方式（转为base64编码）
        const fileReader = new FileReader()
        fileReader.readAsDataURL(fileBlob)
        this.pdfData = ''
        this.excleData = ''
        this.docxData = ''
        fileReader.onload = (e) => {
          switch (fileType) 
          {
            case 'pdf':
              this.pdfData = e.target.result
              break;
            case 'xlsx':
            case 'xls':
              this.excleData = e.target.result
              break;
            case 'docx':
              this.docxData = e.target.result
              break;
            default:
              break;
          }
        }

        // 第三种方式（获取到buffer）
        // fileBlob.arrayBuffer().then((buffer) => {
        //   this.pdfData = buffer
        // })
      })
    },
  },
}
</script>

<style  scoped>
.scrollBox {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.select-file {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
</style>
